<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" :zIndex="10000" @ok="handleSubmit" width="440px" :height="160" destroyOnClose>
    <div :class="prefixCls">
      <div :class="prefixCls + '-image'">
        <img
          v-if="randCodeData.requestCodeSuccess"
          style="margin-top: 2px; width: 300px; height: 100px"
          :src="randCodeData.originalImageBase64"
          @click="handleChangeCheckCode"
        />
        <img v-else style="margin-top: 2px; width: 300px; height: 120px" :src="checkCodeImage" @click="handleChangeCheckCode" />
      </div>

      <div :class="prefixCls + '-input'">
        <a-input v-model:value="randCodeData.captchaValue" placeholder="图形验证码" style="min-width: 100px" />
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, onMounted, reactive } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { useUserStore } from "/@/store/modules/user"
  import { getImageCaptcha, checkImageCaptcha } from "/@/api/auth"
  import checkCodeImage from "/@/assets/images/checkcode.png"

  const userStore = useUserStore()
  const emit = defineEmits(["register", "submit"])
  const title = ref("安全验证")
  const { createMessage } = useMessage()
  const { prefixCls } = useDesign("man-machine-verify")
  const randCodeData = reactive({
    originalImageBase64: "",
    captchaValue: "",
    requestCodeSuccess: false,
    captchaToken: null,
  })

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    console.log("data", data)
    setModalProps({
      canFullscreen: false,
      defaultFullscreen: false,
      showCancelBtn: false,
      okText: "验证",
    })
    handleChangeCheckCode()
  })

  const handleSubmit = async () => {
    try {
      const data = {
        captchaValue: randCodeData.captchaValue,
        token: randCodeData.captchaToken,
        captchaType: "image",
      }

      await checkImageCaptcha(data)
      emit("submit", data)
      closeModal()
    } catch (res: any) {
      createMessage.error(res?.message || "验证码错误")
      handleChangeCheckCode()
    }
  }

  const handleChangeCheckCode = () => {
    randCodeData.captchaValue = ""
    //TODO 兼容mock和接口，暂时这样处理
    getImageCaptcha().then((res) => {
      randCodeData.originalImageBase64 = res.originalImageBase64
      randCodeData.requestCodeSuccess = true
      randCodeData.captchaToken = res.token
    })
  }
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-man-machine-verify";

  .@{prefix-cls} {
    display: flex;
    margin: 5px;
    justify-content: center;
    flex-direction: column;
    align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
    justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/

    &-image {
      margin-bottom: 20px;
      width: 300px;
    }

    &-input {
      width: 90%;
    }
  }
</style>
